<div
    class="absolute inset-0 flex flex-col min-w-0 overflow-y-auto"
    cdkScrollable>

    <!-- Header -->
    <div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 pb-22 sm:pt-12 sm:pb-28 sm:px-10 bg-default dark:bg-transparent">
        <div class="flex-1 min-w-0">
            <!-- Breadcrumbs -->
            <div>
                <div class="hidden sm:flex flex-wrap items-center font-medium">
                    <div>
                        <a class="whitespace-nowrap text-primary-500">Projects</a>
                    </div>
                    <div class="flex items-center ml-1 whitespace-nowrap">
                        <mat-icon
                            class="icon-size-5 text-secondary"
                            [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
                        <a class="ml-1 text-primary-500">Weekend Project</a>
                    </div>
                    <div class="flex items-center ml-1 whitespace-nowrap">
                        <mat-icon
                            class="icon-size-5 text-secondary"
                            [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
                        <span class="ml-1 text-secondary">Overview</span>
                    </div>
                </div>
                <div class="flex sm:hidden">
                    <a
                        class="inline-flex items-center -ml-1.5 text-secondary font-medium"
                        [routerLink]="'./..'">
                        <mat-icon
                            class="icon-size-5 text-secondary"
                            [svgIcon]="'heroicons_solid:chevron-left'"></mat-icon>
                        <span class="ml-1">Back</span>
                    </a>
                </div>
            </div>
            <!-- Title -->
            <div class="mt-2">
                <h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
                    Page heading
                </h2>
            </div>
        </div>
        <!-- Actions -->
        <div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
            <button mat-stroked-button>
                <mat-icon
                    class="icon-size-5 mr-2"
                    [svgIcon]="'heroicons_solid:pencil-alt'"></mat-icon>
                Edit
            </button>
            <button
                class="ml-3"
                mat-flat-button
                [color]="'primary'">
                <mat-icon
                    class="icon-size-5 mr-2"
                    [svgIcon]="'heroicons_solid:link'"></mat-icon>
                View
            </button>
        </div>
    </div>

    <!-- Main -->
    <div class="flex-auto -mt-16 p-6 sm:p-10 rounded-t-2xl shadow bg-card">

        <!-- CONTENT GOES HERE -->
        <div class="h-400 min-h-400 max-h-400 border-2 border-dashed border-gray-300 rounded-2xl"></div>

    </div>

</div>
